Reactアプリでサウンドを鳴らしてみた（react-sound）

#React

若槻龍太

2021.09.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

今回はreact-soundを使用してReactアプリでボタンクリック時にサウンドを鳴らしてみました。

react-soundとは

react-soundを使用すればReactアプリケーションで音楽を再生したり、操作に応じて効果音を鳴らしたりする実装を行うことができます。

react-sound - npm

注意点として、react-soundはメンテが直近3年間行われておらず、Reactの最新バージョンである17にも未対応です。一方で、同じくReact向けのサウンド再生パッケージであるuse-soundであれば比較的活発にメンテが行われているのでこちらのご利用もご検討ください。

Reactアプリでサウンドを鳴らしてみた（use-sound） | DevelopersIO

やってみた

サウンドを1回だけ鳴らせるボタン

デモ

ボタンを押すと一度だけサウンドを鳴らすことができます。

コード概要

ボタンクリック時にSoundモジュールのplayStatusをPLAYINGに変更することにより指定のサウンドを再生することができます。

import React, { useState } from 'react';
import Sound from 'react-sound';
import Music from './決定、ボタン押下4.mp3';
import './styles.css';

export const App: React.FC = () => {
  const [SoundStatus, setSoundStatus] = useState('STOPPED');

  const handleSoundPlay = () => {
    setSoundStatus(Sound.status.PLAYING);
  };

  return (
    <>
      <button onClick={handleSoundPlay}>音を鳴らす</button>
      <Sound
        url={Music}
        autoLoad={true}
        playStatus={SoundStatus}
        playFromPosition={0}
      />
    </>
  );
};

サウンドを何度でも鳴らせるボタン

デモ

ボタンを押すと何度でもサウンドを鳴らすことができます。サウンドが鳴り止むまでは次のサウンドを鳴らせません。

コード概要

SoundモジュールでonFinishedPlayingによりサウンド再生完了後にplayStatusをSTOPPEDに変更することにより、何度でもサウンドを鳴らせるようにしています。

import React, { useState } from 'react';
import Sound from 'react-sound';
import Music from './決定、ボタン押下4.mp3';
import './styles.css';

export const App: React.FC = () => {
  const [SoundStatus, setSoundStatus] = useState('STOPPED');

  const handleSoundPlay = () => {
    setSoundStatus(Sound.status.PLAYING);
  };

  return (
    <>
      <button onClick={handleSoundPlay}>音を鳴らす</button>
      <Sound
        url={Music}
        autoLoad={true}
        playStatus={SoundStatus}
        playFromPosition={0}
        onFinishedPlaying={() =>
          setSoundStatus(Sound.status.STOPPED)
        }
      />
    </>
  );
};